<template>
	<div>
		<el-popover width="600" trigger="click" title="机台明细">
			<div>
				<el-form ref="ruleForm" :model="machineItem" :hide-required-asterisk="false" label-width="100px" :show-message="false">
					<el-row class="flex-start-center-wrap">
						<el-col :span="12">
							<el-form-item class="margin-bottom-10" label="实时产量(kg)">
								<span class="read-only-2 big-ipt-inner-custom">{{ machineItem.accumulateShiftQty }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item class="margin-bottom-10" label="称重产量(kg)">
								<span class="read-only-2 big-ipt-inner-custom">{{ machineItem.accumulateWeighNetWeight }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item class="margin-bottom-10" label="能耗(kw·h)">
								<span class="read-only-2 big-ipt-inner-custom">{{ machineItem.accumulateEnergy }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item class="margin-bottom-10" label="工时">
								<span class="read-only-2 big-ipt-inner-custom">{{ machineItem.workHours }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item class="margin-bottom-10" label="开台时间">
								<span class="read-only-2 big-ipt-inner-custom">{{ machineItem.startTime }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item class="margin-bottom-10" label="了机时间">
								<span class="read-only-2 big-ipt-inner-custom">{{ machineItem.endTime }}</span>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<jk-table border :stripe="false" :show-header="true" :data="machineItem.machineDayDateList" :height="300">
				<vxe-column title="日期" align="left" field="belongDate" :width="110"></vxe-column>
				<vxe-column title="实时产量(kg)" align="right" field="shiftQty" :width="110"></vxe-column>
				<vxe-column title="称重产量(kg)" align="right" field="weighNetWeight" :width="110"></vxe-column>
			</jk-table>
			<div slot="reference" style="width: calc(100%);padding: 2px;">
				<el-tag effect="plain" size="mini" type="primary" plain class="" style="width: 100%;">
					<div class="flex-start-center">
						<jk-state-bar :state="machineItem.openingState" :state-list="openStateList" :show-text="false"></jk-state-bar>
						<span>{{ machineItem.machineName }}</span>
					</div>
				</el-tag>
			</div>
		</el-popover>
	</div>
</template>
<script>
    import { openStateList } from '../../../../utils/jk/status-option-list';

    export default {
        props: {
            processItem: {
                type: Object,
                default() {
                    return {};
                }
            },
            machineItem: {
                type: Object,
                default() {
                    return {};
                }
            }
        },
        data() {
            return {
                openStateList: openStateList
            };
        }
    };
</script>
